<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件修饰符</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <style>
      * {
          margin-top: 20px;
      }

      .demo1 {
          height: 50px;
          background-color: azure;
      }

      .box1{
          padding: 5px;
          background-color: aqua;
      }
      .box2{
          padding: 5px;
          background-color: #b71e1e;
      }

      .list{
          width: 200px;
          height: 200px;
          background-color: beige;
          overflow: auto;
      }
      li{
          height: 100px;
      }
  </style>
</head>
<body>
<!--
    Vue中的事件修饰符：
      1.prevent:阻止默认事件（常用）
      2.stop:阻止事件冒泡（常用）
      3.once:事件只触发一次（常用）
      4.capture:使用事件的捕获模式（注意顺序：先捕获后冒泡）
      5.self:只有event.target是当前操作的元素时才触发事件
      6.passive:事件的默认行为为立即执行，无需等待事件回调执行完毕
-->
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <!--prevent:阻止默认事件（常用）-->
  <a href="http://www.atguigu.com" @click.prevent="showInfo1">点我提示信息</a>
  <!--  stop:阻止事件冒泡（常用）-->
  <div class="demo1" @click="showInfo2">
    <button @click.stop="showInfo2">点我提示信息</button>
    <!--修饰符可以连续写-->
    <!--<a href="http://www.atguigu.com" @click.prevent.stop="showInfo1">点我提示信息</a>-->
  </div>
  <!--once:事件只触发一次（常用）-->
  <button @click.once="showInfo3">点我提示信息</button>
  <!-- capture:使用事件的捕获模式 -->
  <div class="box1" @click.capture="showInfo4(1)">
    div1
    <div class="box2" @click="showInfo4(2)">
      div2
    </div>
  </div>
  <!--  self:只有event.target是当前操作的元素时才触发事件-->
  <div class="demo1" @click.self="showInfo2">
    <button @click="showInfo2">点我提示信息</button>
  </div>

  <!--passive:事件的默认行为为立即执行，无需等待事件回调执行完毕-->
  <!--scroll：滚动条滚动时触发，wheel：鼠标滚轮滚动时触发-->
  <!--正常：先调用demo，执行完后，滚动条下移；加了passive后滚动条直接下移，不用等demo回调结束-->
  <ul @wheel.passive="demo" class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false//阻止vue在启动时产生生产提示

  new Vue({
    el: "#root",
    data: {
      name: '金串串',
    },
    methods: {
      showInfo1(e) {
        // e.preventDefault()//阻止默认行为
        alert('同学你好1')
      },
      showInfo2(e) {
        // e.stopPropagation()//阻止事件冒泡
        alert('同学你好2')
      },
      showInfo3(e) {
        alert('同学你好3')
      },
      showInfo4(value) {
        console.log('value-----',value)
      },
      demo(){

      }
    }
  })

</script>
</html>